<template>
  <div class="min-h-screen bg-gradient-to-br from-blue-50 to-purple-50 dark:from-gray-900 dark:to-gray-800 px-4 py-24">
    <div class="max-w-5xl mx-auto">
      <h1 class="text-2xl font-bold mb-6 flex items-center gap-2">
        <i class="fa fa-trophy text-amber-500"></i>成就中心
      </h1>

      <!-- 统计卡片 -->
      <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-6">
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow p-4 text-center">
          <div class="text-3xl font-bold text-primary">{{ unlockedCount }}</div>
          <div class="text-sm text-gray-600 dark:text-gray-400">已解锁</div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow p-4 text-center">
          <div class="text-3xl font-bold text-amber-500">{{ totalCount }}</div>
          <div class="text-sm text-gray-600 dark:text-gray-400">总成就</div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow p-4 text-center">
          <div class="text-3xl font-bold text-green-500">{{ points }}</div>
          <div class="text-sm text-gray-600 dark:text-gray-400">成就点数</div>
        </div>
      </div>

      <!-- 成就列表 -->
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
        <div
          v-for="ach in achievements"
          :key="ach.id"
          class="rounded-xl shadow p-4 flex flex-col gap-2"
          :class="ach.unlocked ? 'bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-700' : 'bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700'"
        >
          <div class="flex items-center gap-3">
            <div class="w-12 h-12 rounded-full flex items-center justify-center text-white text-xl" :class="ach.unlocked ? 'bg-amber-500' : 'bg-gray-400'">
              <i :class="ach.icon"></i>
            </div>
            <div>
              <h3 class="font-bold">{{ ach.title }}</h3>
              <p class="text-xs text-gray-500">{{ ach.desc }}</p>
            </div>
          </div>
          <!-- 进度条 -->
          <div v-if="!ach.unlocked" class="mt-2">
            <div class="text-xs text-gray-500 mb-1">{{ ach.current }}/{{ ach.target }}</div>
            <div class="w-full bg-gray-200 dark:bg-gray-700 rounded h-2">
              <div class="bg-amber-500 h-2 rounded" :style="{ width: ach.progress + '%' }"></div>
            </div>
          </div>
          <!-- 奖励 -->
          <div class="mt-2 text-xs text-gray-600 dark:text-gray-400">
            奖励：{{ ach.reward }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

// 模拟成就数据
const achievements = ref([
  {
    id: 1,
    title: '初出茅庐',
    desc: '完成第 1 场游戏',
    icon: 'fa fa-seedling',
    target: 1,
    current: 1,
    progress: 100,
    unlocked: true,
    reward: '海龟币 +10'
  },
  {
    id: 2,
    title: '连胜达人',
    desc: '连续猜对 5 题',
    icon: 'fa fa-fire',
    target: 5,
    current: 3,
    progress: 60,
    unlocked: false,
    reward: '提示 +3'
  },
  {
    id: 3,
    title: '推理大师',
    desc: '累计完成 50 场游戏',
    icon: 'fa fa-brain',
    target: 50,
    current: 42,
    progress: 84,
    unlocked: false,
    reward: '专属徽章'
  },
  {
    id: 4,
    title: '夜猫子',
    desc: '在凌晨 0-6 点完成 10 场游戏',
    icon: 'fa fa-moon',
    target: 10,
    current: 10,
    progress: 100,
    unlocked: true,
    reward: '头像框 +1'
  }
])

const unlockedCount = computed(() => achievements.value.filter(a => a.unlocked).length)
const totalCount = computed(() => achievements.value.length)
const points = computed(() => unlockedCount.value * 10)
</script>